<template>
	<view class="wrap">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOpts" :up="upOpts">
			<view v-if="loginPromptVisible" class="prompt-box">
				<u-empty mode="car" icon-color="#acacac" text-size="13px" text="您还没有登录，无法同步数据~">
					<button class="btn" type="default" @click="openLoginPanel()">登录</button>
				</u-empty>
			</view>
			
			<view v-if="emptyPromptVisible" class="prompt-box">
				<u-empty mode="car" icon-color="#acacac" text-size="13px" text="您的购物车是空的~">
					<button class="btn" type="default" @click="selectProduct()">去选购商品</button>
				</u-empty>
			</view>
		
			<u-checkbox-group v-model="checkboxList" @change="checkboxListChange" placement="column">
				<view v-for="record in recordList" :key="record.id" class="cart-item">
					<view class="toolbar">
						<u-icon name="more-dot-fill" color="#ccc" size="16" @click="openActionSheet(record.id)"></u-icon>
					</view>
					<view class="product">
						<view class="select-box">
							<u-checkbox :name="record.id" shape="circle" activeColor="#d62222" size="15px"></u-checkbox>					
						</view>
						<view class="photo">
							<u--image :src="record.cover" width="136rpx" height="136rpx"></u--image>
						</view>
						<view class="info">
							<view class="title">{{ record.title }}</view>
							<view class="specs">{{ record.skuName }}</view>
							<view class="handler">
								<x-price :amount="record.price"></x-price>
								<x-setpper v-model="record.num" :name="record.id" @change="changeNum"></x-setpper>
							</view>	
						</view>
					</view>	
				</view>
			</u-checkbox-group>
		</mescroll-body>
		
		<view v-if="recordList.length > 0" class="settle-toolbar">
			<u-checkbox-group v-model="checkboxGate" @change="checkboxGateChange">
				<u-checkbox name="all" shape="circle" activeColor="#d62222" size="15px" label="全选" labelSize="13"></u-checkbox>
			</u-checkbox-group>
			<view class="settle-box">
				<view class="settle-info">
					<view class="total">共{{ settle.num }}件<view class="amount">￥{{ settle.amount }}</view></view>
					<!--<view class="discount">优惠<view class="amount">￥5</view></view>-->
				</view>
				<button type="default" class="settle-btn" @click="goSettle()">结算</button>	
			</view>	
		</view>	
		
		<u-action-sheet cancelText="取消" 
			:actions="actionList" :show="showActionSheet" :safeAreaInsetBottom="true"
			:closeOnClickAction="true" :closeOnClickOverlay="true"
			@select="selectActionSheet" @close="closeActionSheet"	
		>
		</u-action-sheet>
		
		<login-panel :visible="loginPanelVisible" @close="closeLoginPanel" @completed="completedLogin"></login-panel>
		
		<x-tabbar currentTab="cart" :cartItemNum="cartProductNum"></x-tabbar>
	</view>
</template>

<script>
import XPrice from "@/components/XPrice.vue";	
import XTabbar from "@/components/XTabbar.vue";
import XSetpper from "@/components/XSetpper.vue";
import LoginPanel from "@/components/LoginPanel.vue";	
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { cartList, cartUpdate, cartDel, cartSettleAmount, cartItemNum } from "@/api/cart.js";
import { productSkuStoreNum } from "@/api/shop.js";

export default {
	mixins: [MescrollMixin],
	components: {
		XPrice,
		XTabbar,
		XSetpper,
		LoginPanel
	},
	onShow() {
		this.getCartItemNum();
	},
	data() {
		return {
			cartProductNum: 0,
			loginPromptVisible: false,
			loginPanelVisible: false,
			emptyPromptVisible: false,
			checkboxList: [],
			checkboxGate: [],
			totalRow: 0,
			queryParams: {},
			recordList: [],
			settle: {
				num: 0,
				amount: 0
			},
			showActionSheet: false,
			actionList: [
				{
					id: 0,
					action: 'del',
					name:'删除',
					color:'#d7142b'
				}
			],
			upOpts: {
				empty: {
					use: false
				},
				isLock: true
			},
			downOpts: {
				isLock: true
			}
		}
	},
	watch: {
		checkboxList: {
			handler(newValue, oldValue) {
				if(newValue.length > 0) {
					this.getCartSettleAmount(newValue);	
				} else {
					this.settle = {
						num: 0,
						amount: 0
					}	
				}
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		getCartItemNum() {
			if(this.isLogin()) {
				cartItemNum().then(res=>{
					this.cartProductNum = res.data.num;
				});
			}
		},
		upCallback(page) {
			console.log("上拉加载");
			if(!this.isLogin()) {
				this.loginPromptVisible = true;
				this.mescroll.endErr();
				return;
			} else {
				this.upOpts.isLock = false;
				this.downOpts.isLock = false;
			}
			
			this.queryParams.pageSize = page.size;
			this.queryParams.page = page.num;
			this.queryParams.filter = this.currentFilterIdent;
			cartList(this.queryParams).then(res=>{
				// 第一页手动置空列表
				if(page.num == 1) {
					this.recordList = [];	
				}
				
				this.recordList = this.recordList.concat(res.data.recordList); 
				this.mescroll.endBySize(res.data.recordList.length, res.data.totalRow);
				
				if(this.recordList.length <= 0) {
					this.emptyPromptVisible = true;
				} else {
					this.emptyPromptVisible = false;
				}
			});
		},		
		openActionSheet(id) {
			this.actionList = this.actionList.map(item=>{
				item.id = id;
				return item; 
			});
			this.showActionSheet = true;	
		},		
		closeActionSheet() {
			this.actionList = this.actionList.map(item=>{
				item.id = 0;
				return item; 
			});
			this.showActionSheet = false;
		},
		selectActionSheet(item) {
			if(item.action=='del') {
				cartDel(item.id).then(()=>{
					this.toast('商品已从购物车中删除');
					this.mescroll.resetUpScroll();
					this.getCartItemNum();
				});
			}
		},
		openLoginPanel() {
			this.loginPanelVisible = true;
		},
		closeLoginPanel() {
			this.loginPanelVisible = false;
		},
		completedLogin() {
			this.loginPanelVisible = false;
			this.loginPromptVisible = false;
			this.mescroll.resetUpScroll();
		},
		selectProduct() {
			uni.switchTab({
				url: '/pages/shop/index'
			});
		},
		changeNum(e) {
			cartUpdate(e.name, e.value).then(res=>{
				if(res.data.isUpdated=='N') {
					this.toast(`该商品库存不足${e.value}`);
				}
			});
		},
		checkboxListChange(e) {
			if(e.length == this.recordList.length) {
				this.checkboxGate = ['all'];
			} else {
				this.checkboxGate = [];
			}
		},
		checkboxGateChange(e) {
			if(e.length > 0) {
				this.checkboxList = this.recordList.map(item=>{
					return item.id;
				});
			} else {
				this.checkboxList = [];
			}
		},
		getCartSettleAmount(ids) {
			cartSettleAmount(ids).then(res=>{
				this.settle = res.data.settle;
			});	
		},
		goSettle() {
			if(this.checkboxList.length <= 0) {
				this.toast('请选择要结算的商品');
				return;	
			}
			
			let params = [];
			this.recordList.forEach(record => {
				this.checkboxList.forEach(id => {
					if(record.id == id) {
						params.push({
							cartId: record.id,
							skuId: record.skuId,
							num: record.num
						});
					}
				});
			});
			
			uni.navigateTo({
				url: '/pages/uc/settle?params=' + JSON.stringify(params)
			});
		}
	}
}	
</script>

<style lang="less">
.wrap {
	display: flex;
	flex-direction: column;
	padding: 0 24rpx;
	box-sizing: border-box;
	background: #f4f4f4;
	height: 100vh;
}
	
.prompt-box {
	margin-top: 30%;
	
	.btn {
		margin: 15px 0;
		width: 300rpx;
		height: 32px;
		line-height: 32px;
		background: #f8f8f8;
		border: 1px solid #d62222;
		color: #d62222;
		font-size: 14px;
		text-align: center;
	}
}	

.cart-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	padding: 24rpx;
	margin: 12rpx 0;
	border-radius: 5px;
	
	.toolbar {
		display: flex;
		justify-content: flex-end;
	}
	
	.product {
		display: flex;
		flex-direction: row;
		align-items: center;
		
		.select-box {
			width: 40rpx;
		}
		
		.photo {
			margin: 0 24rpx;
		}
		
		.info {
			display: flex;
			flex: 1;
			flex-direction: column;
			
			.title {
				font-size: 13px;
				color: #2e2e2e;
			}
			
			.specs {
				margin: 12rpx 0;
				font-size: 12px;
				color: #acacac;
			}
			
			.handler {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				.price {
					font-size: 13px;
					color: #d62222;
				}
			}
		}
		
	}
}
	
.settle-toolbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 50px;
	width: 100%;
	border-top: 1px solid #eee;
	padding: 24rpx;
	box-sizing: border-box;
	
	.settle-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		
		.settle-info {
			display: flex;
			flex-direction: column;
			font-size: 12px;
			color: #8c8c8c;
			margin-right: 24rpx;
			
			.total {
				display: flex;
				flex-direction: row;
				align-items: center;
				
				.amount {
					font-size: 16px;
					color: #d62222;	
				}
			}
			
			.discount {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				
				.amount {
					color: #d62222;	
				}
			}
		}
		
		.settle-btn {
			width: 200rpx;
			height: 32px;
			line-height: 32px;
			background: #d62222;
			border-radius: 18px;
			color: #fff;
			font-size: 14px;
		}
	}
}
</style>